<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title>{$eyou.field.seo_title}</title>
    <meta name="description" content="{$eyou.field.seo_description}" />
    <meta name="keywords" content="{$eyou.field.seo_keywords}" />
    <link href="{eyou:global name='web_ico' /}" rel="shortcut icon" type="image/x-icon" />
    {eyou:static file="skin/css/style.css" /}
    {eyou:static file="skin/css/guestbook.css" /}
    {eyou:static file="__PUBLIC__/static/photo/css/normalize.css" /}
    {eyou:static file="__PUBLIC__/static/photo/css/htmleaf-demo.css" /}
    {eyou:static file="__PUBLIC__/static/photo/css/lightgallery.css" /}
    {eyou:static file="__PUBLIC__/static/photo/js/jquery-1.11.0.min.js" /}
    {eyou:static file="__PUBLIC__/static/photo/js/lightgallery-all.min.js" /}
</head>
<body>
<style>
    .video-container {
        width: 100%; /* 或者具体宽度 */
        position: relative;
        overflow: hidden; /* 防止内容溢出 */
    }

    .video-container video {
        width: 100%; /* 宽度100% */
        object-fit: cover; /* 视频覆盖整个容器，可能会裁剪视频 */
    }
    .text-button{
        font-size:12px; background-color: rgba(255, 255, 255, 0); /* 白色背景透明 */border: 1px solid white; /* 边框颜色 */ padding-left: 5%;padding-right: 5%;
        padding-bottom: 1%;padding-top: 1%;border-radius: 15px;
    }
    .video-container {
        position: relative;

    }
    .play-button {
        font-size:12px;
        background-color: rgba(255, 255, 255, 0); /* 白色背景透明 */
        border: 1px solid white; /* 边框颜色 */
        padding-left: 5%;padding-right: 5%;
        padding-bottom: 1%;padding-top: 1%;
        position: absolute;
        top: 20%; /* 垂直居中 */
        left: 50%; /* 水平居中 */
        transform: translate(-50%, -50%); /* 调整按钮位置 */
        cursor: pointer; /* 鼠标悬停样式 */
        border-radius: 15px;
    }
    .play-button-video {
        font-size:12px;
        background-color: rgba(255, 255, 255, 0); /* 白色背景透明 */
        border: 1px solid white; /* 边框颜色 */
        padding-left: 5%;padding-right: 5%;
        padding-bottom: 1%;padding-top: 1%;
        position: absolute;
        top: 80%; /* 垂直居中 */
        left: 50%; /* 水平居中 */
        transform: translate(-50%, -50%); /* 调整按钮位置 */
        cursor: pointer; /* 鼠标悬停样式 */
        border-radius: 15px;
    }
    .text-white {
        color: #fff;
    }

    .img:before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-color: rgba(2,160,255,.5);
        position: absolute;
        left: 0;
        bottom: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
    }

    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0; /* 初始透明 */
        transition: opacity 0.3s ease; /* 平滑过渡效果 */
    }

    .ps-item:hover .overlay {
        opacity: 1; /* 鼠标悬停时显示 */
    }
    .channel-banner {height:350px;position:relative;background-repeat:no-repeat;background-position:center center;background-size:cover;margin:0;padding:0;}
    .channel-banner .banner-info {position:absolute;top:50%;margin-top:-50px;left:0;right:0;z-index:3}
    .channel-banner .banner-info h3{font-size:40px;font-weight:600;position:relative;margin-bottom:30px}
    .channel-banner .banner-info h3:before {left:50%;margin-left:-15px;bottom:-10px;width:30px;height:3px;background:#ff9600;content:'';display:block;position:absolute;}
    .channel-banner .banner-info p{font-size:36px;}
</style>
<div class="container"> {eyou:include file="header_pc.htm" /}
    <span class="nav_wrap" style="display: none"></span>
    <div class="web_main" style="padding:0px">

        {eyou:adv pid='8'}
        <div class="video-container">
            <video src='{$field.litpic}' width="100%" height="350" controls  autoplay muted></video>
        </div>
        {/eyou:adv}


        <section class="index_bd" style="margin-bottom:5px">
            <div id="lightgallery_0">
            {eyou:volist name='$bigPic' id='field'}
                <div style="margin-bottom:5px" data-src="{$field.litpic}">
                <a class="mouseover-1 lightbox item_img attrimg"  href="#" />
                    <img id="img"  class="img"  src="{$field.litpic}" />
                </a>
                </div>
            {/eyou:volist}
            </div>
        </section>

        <section  style="margin-top: 35px;margin-bottom: 15%">

                <ul class="product_items flex_row" id="lightgallery_1">
                    {eyou:volist name='$smallPic' id='field'}
                    <li style="width:50%" class="swiper-slide product_item wow fadeInUpA ps-item" data-wow-delay=".{$i}s" data-src="{$field.litpic}">
                        <figure>
                                <a class="img mouseover-1 lightbox item_img" href="#">
                                <img src="{$field.litpic}" alt="{$field.title}" title=""/>
                                </a>

<!--                            <div class="overlay">-->

<!--                            </div>-->
                        </figure>
                    </li>
                    {/eyou:volist}
                </ul>



        </section>

    </div>
    <div class="tab-content-wrap product-detail">
        {$eyou.field.content}
    </div>
    {eyou:include file="footer_pc.htm" /}
</div>
<script>
    var width = window.innerWidth;
    $('#img').css("min-width",width);
    $(document).ready(function(){
        $('#lightgallery_0').lightGallery();
    });
    $(document).ready(function(){
        $('#lightgallery_1').lightGallery();
    });
</script>
</body>
</html>